<template>
  <zm-view ref="view">
    <view class="content-wrap">
      <view class="flex flex-col radius-16 overflow-hidden bg-white">
        <film-card custom-class="film-card-radius" :info="card" :disabled="isInvalid" :show-expire="!isInvalid">
          <view v-if="isInvalid" slot="status" class="status-tag">
            <image class="status-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/grey-badge.png')" mode="scaleToFill" />
            <text class="status-text">{{ stateText }}</text>
          </view>
        </film-card>
        <view v-if="!isInvalid" class="qrcode-wrap">
          <view class="collapse-btn" @click.stop="onClickCollapse">
            <u-icon v-if="isCollapse" name="qrcode" size="40rpx" custom-prefix="zm-icon"></u-icon>
            <u-icon v-else name="arrow-up" size="32rpx" bold></u-icon>
          </view>
          <view class="flex flex-col items-center overflow-hidden" :class="{ 'is-collapse': isCollapse }">
            <zm-qrcode ref="qrcode" :value="card.qrCode" :size="300"></zm-qrcode>
            <text class="text-999 font-26 text-center mt-40 px-60 mx-50 mb-30">{{ card.qrCodeExplain }}</text>
          </view>
          <zm-button v-if="card.cardRecharge == '1'" plain type="primary" width="360rpx" height="70rpx" @click="recharge(card)">充值</zm-button>
        </view>
      </view>
      <view class="flex items-center justify-between radius-16 px-34 py-28 font-28 bg-white click-fade" @click="onClickSuitCinema">
        <text>适用影院</text>
        <u-icon
          name="arrow-right"
          color="#999"
          size="28rpx"
          :label="`${card.useCinema.cityNum}个城市${card.useCinema.cinemaNum}家影城可用`"
          label-pos="left"
          label-size="28rpx"
          label-color="#999"
        ></u-icon>
      </view>
      <view class="flex items-center justify-between radius-16 px-34 py-28 font-28 bg-white click-fade" @click="handleClickDetail">
        <text>消费明细</text>
        <u-icon name="arrow-right" label="查看" label-pos="left" label-color="#999" color="#999" size="28rpx">消费明细</u-icon>
      </view>
      <view class="flex flex-col radius-16 px-34 py-28 font-28 bg-white">
        <text class="font-30 font-700">使用须知</text>
        <text class="mt-24 font-26 text-999">{{ card.useExplain }}</text>
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      cardId: "",
      card: {
        useCinema: {
          cityNum: "",
          cinemaNum: ""
        }
      },
      isCollapse: false
    }
  },
  computed: {
    ...mapGetters(["cardName"]),
    stateText() {
      if (this.card.isVoid == 1) {
        return "已作废"
      } else if (this.card.isFrozen == 1) {
        return "已冻结"
      } else if (this.card.isExpired) {
        return "已过期"
      } else if (+this.card.point == 0) {
        return "已用完"
      } else {
        return ""
      }
    },
    isInvalid() {
      if (this.card.isVoid == 1) {
        return true
      } else if (this.card.isFrozen == 1) {
        return true
      } else if (this.card.isExpired == 1) {
        return true
      } else if (+this.card.point == 0) {
        return true
      } else {
        return false
      }
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({ title: this.cardName })
    this.cardId = options.cardId
  },
  onShow() {
    this.handleGetInfo()
  },
  methods: {
    async handleGetInfo() {
      this.card = await uni.$api.card.getCardInfo({ cardId: this.cardId })
    },
    handleClickDetail() {
      uni.$toView({
        url: "pages/person/film-card-consume/film-card-consume",
        params: { cardCode: this.card.cardCode }
      })
    },
    onClickCollapse() {
      this.isCollapse = !this.isCollapse
    },
    recharge(card) {
      this.toView({
        url: "pages/person/user-wallet/user-wallet",
        params: {
          type: "cardRecharge",
          cardId: card.cardId
        }
      })
    },
    // 跳转适用影城
    onClickSuitCinema() {
      this.toView({
        url: "pages/person/suit-cinema/suit-cinema",
        params: {
          saleOrderNo: this.card.saleOrderNo,
          type: "card"
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content-wrap {
  display: grid;
  row-gap: 20rpx;
  padding: 24rpx 30rpx;
  grid-template-columns: 1fr;
  .film-card-radius {
    border-radius: 18rpx 18rpx 0 0;
  }
  .status-tag {
    right: -10rpx;
    bottom: 0rpx;
    width: 183rpx;
    height: 183rpx;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    .status-bg {
      top: 0;
      left: 0;
      width: 183rpx;
      height: 183rpx;
      position: absolute;
    }
    .status-text {
      color: #999;
      font-size: 28rpx;
      transform: rotate(20deg);
    }
  }

  .qrcode-wrap {
    display: flex;
    z-index: 10;
    padding: 40rpx;
    padding-top: 76rpx;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    .is-collapse {
      height: 0;
    }

    .collapse-btn {
      top: -35rpx;
      left: 50%;
      z-index: 10;
      width: 70rpx;
      height: 70rpx;
      display: flex;
      position: absolute;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      transform: translateX(-50%);
      box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(51, 51, 51, 0.16);
    }
  }
}

::v-deep .film-card {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
</style>
